<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Maker Installation Instructions</title>

<style type="text/css">
   body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
   h2 {font-weight:bold; color:#000099; margin:10px 0px; }
   p span {color:#006600; font-weight:bold; }
   a, a:link, a:visited {color:#0000FF;}
   textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
   textarea.html {height: 300px;}
   p {margin: 0 0 10px 0;}
   code, pre {font-family: Consolas,monospace; color: green;}
   ol li {margin: 0 0 15px 0;}
</style>

</head>

<body>

<h2>Your Menu</h2>

<style type="text/css">#cssmenu {
	border:1px solid #000099;
	background:#000099;
	}
#cssmenu > ul {
	padding:1px 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:21px;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:148px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:#000099;
	color:#ffffff;
	width:148px;
	height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:#0066FF;
	color:#ffffff;
	width:146px;
	height:13px;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
}
#cssmenu > ul li ul {
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none;
	background:#ffffff;
	width:146px;
	position:absolute;
	top:21px;
	left:-1px;
	border:1px solid #000099;
	border-top:none;
}
#cssmenu > ul li:hover ul {
	display:block;
}
#cssmenu > ul li ul li {
	width:146px;
	clear:left;
	width:146px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
	clear:left;
	background:#000099;
	padding:4px 0;
	width:146px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:1000;
}
#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
	clear:left;
	background:#0066FF;
	padding:4px 0;
	width:146px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:145px;
	top:-2px;
	padding:1px 1px 0 1px;
	border:1px solid #000099;
	border-left:1px solid #000099;
	background:#ffffff;
	z-index:900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
	display:block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited {
	background:#000099;
}
#cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active {
	background:#0066FF;
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>

<h2>Installation Instructions</h2>

<ol>
   <li>Upload the <code>menu_assets</code> folder to the root directory of your website. This is usually where your <code>index.html</code> file is.</li>
   <li>Copy and paste the code below somewhere between the <code>&lt;head>&lt;/head></code> tags.<textarea class='css'><link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"></textarea></li>
   <li>Copy and paste the html below where ever you want your menu to show up.<textarea class='html'><div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div></textarea></li>
</ol>

<h2>Notes</h2>
<ol>
   <li>If you run into a problem getting your menu to work or have suggestions for the site please <a href='http://cssmenumaker.com/resources/contact'>Contact Us</a> and let us know. We will try to help as much as possible.</li>
</ol>

</body>
</html>